<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>homepage</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <style>

        body {
            margin: 0;
            padding: 0;
        }

        li {
            width: 12%;
            text-align: center;
        }

        a:hover {
            color: red;
        }

        span:hover {
            color: red;
        }

        i:hover {
            color: red;
            margin: 5px 0 0 0;
        }

        body {
            background-color: #f5f6f7
        }

        .layui-nav-bar {
            display: none;
        }

        #div1 {
            background-image: url("img/20210120054229.jpg");
            background-size: 100% 100%;
        }

        #div2b a {
            font-weight: bolder;
            font-size: 20px;
        }
    </style>
</head>
<body>
<ul class="layui-nav ">
    <li class="layui-nav-item" style="width: 10%">
        <a href=""><i style="font-size: 30px">Haoke</i></a>
    </li>
    <li class="layui-nav-item">
        <a href="">博客</a>
    </li>
    <li class="layui-nav-item" style="">
        <a href="">下载</a>
    </li>
    <li class="layui-nav-item" style="width: 40%">
        <a href="">
            <input type="text" name="title" required lay-verify="required" placeholder="请输入搜索内容" autocomplete="off"
                   class="layui-input" style="width: 87%;float: left">
            <button class="layui-btn" style="float: right">搜索</button>
        </a>
    </li>
    <li class="layui-nav-item">
        <a href="">上传</a>
    </li>
    <li class="layui-nav-item">
        <img src="img/fengjing.jpg" class="layui-nav-img">
        用户名
    </li>
</ul>

<div style="border: 0.1px black solid; height: 80px ;width: 99.9%;" id="div1">

</div>
<div id="div2" style="height: 200px;">
    <div id="div2a" style="font-weight: bolder;font-size: 18px;position: absolute;top: 120px;left: 50%">
        <img src="img/fengjing.jpg" class="layui-nav-img" style="height: 80px;width: 80px"><br>
        &nbsp;&nbsp;用户名
    </div>
    <div id="div2b" style="width: 400px;position: absolute;left: 40%;top: 250px">
        <table border="0.1px" cellspacing="0px" cellpadding="10px">

            <tr style="height: 80px">
                <td style="width: 150px;text-align: center"><a>27</a><br>被访问量</td>
                <td style="width: 150px;text-align: center"><a>27</a><br>被访问量</td>
                <td style="width: 150px;text-align: center"><a>27</a><br>被访问量</td>
            </tr>
        </table>
    </div>
</div>

<div style="border: 0.1px black solid;width: 99%;position: absolute;" >
    <div class="layui-row layui-col-space15" style="position: absolute;left: 20px">
        <div class="layui-col-md6" style="width: 400px;height: 40px">
            <div class="layui-panel"  >
                <div style="padding: 10px;"><i class="layui-icon">&#xe60c;</i> 于2020-10-22 加入CSDN</div>
            </div>
        </div>
    </div>
    <div class="layui-card" style="position: absolute;top: 50px;left: 20px">
        <div class="layui-card-header" style="font-weight: bolder;width: 355px">
            获取成就</div>
        <div class="layui-card-body">
            <img src="img/20210114022819.png" style="width: 30px"></img>&nbsp;&nbsp;获得3次点赞<br><br>
            <img src="img/20210114022828.png" style="width: 30px"></img>&nbsp;&nbsp;获得3次收藏<br>
        </div>
    </div>

    <div class="layui-row layui-col-space15" style="position: absolute;left: 450px">
        <div class="layui-col-md6" style="width: 1100px;height: 40px">
            <div class="layui-panel"  >
                <table border="0.1px" cellspacing="0px" cellpadding="10px">
                    <tr style="height: 40px">
                        <td style="width: 150px;text-align: center"><a>最近</a></td>
                        <td style="width: 150px;text-align: center"><a>文章</a></td>
                        <td style="width: 150px;text-align: center"><a>收藏</a></td>
                        <td style="width: 500px;text-align: right">
                            搜索：<input type="text" style="width: 200px">
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
    <div class="layui-card" style="position: absolute;top: 50px;left: 450px">
        <div class="layui-card-header" style="font-weight: bolder;width: 1050px">
            java-哈哈</div>
        <div class="layui-card-body">
            卡片式面板面板通常用于非白色背景色的主体内<br>
            从而映衬出边框投影<br>
            <br><br>
            <div style="position: absolute;bottom: 10px;right: 10px" >发布日期</div>
            <div style="position: absolute;bottom: 10px;left: 10px">
                <i class="layui-icon">&#xe60c;</i> 阅读量 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<i class="layui-icon">&#xe60c;</i> 点赞
            </div>
        </div>
    </div>
</div>
<script src="layui/layui.js"></script>
</body>
</html>